<template>

  <!--视图-->
  <div>

    <el-button @click="getqs()" type="primary" size="small">签收</el-button>


    <el-button
        plain
        @click="open1">
      哈哈哈哈
    </el-button>
    <el-button @click="getdp()" type="primary" size="small">大屏展示</el-button>
    <el-button @click="excel()" type="primary" size="small">excel导出</el-button>



    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          fixed
          prop="cargoId"
          label="仓库序号"
          width="150">
      </el-table-column>
      <el-table-column
          prop="cargoName"
          label="仓库名称"
          width="120">
      </el-table-column>
      <el-table-column
          prop="cityName"
          label="省/市/区"
          width="200">
        <template v-slot="r">
          {{r.row.provinceName}}    -- {{r.row.districtName}}   --  {{r.row.cityName}}
        </template>
      </el-table-column>
      <el-table-column
          prop="adress"
          label="详细地址"
          width="120">
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间"
          width="120">
      </el-table-column>
      <el-table-column
          prop="people"
          label="创建人"
          width="120">
      </el-table-column>
      <el-table-column
          prop="remark"
          label="备注"
          width="120">
      </el-table-column>
      <el-table-column
          prop="sick"
          label="库存量"
          width="120">
      </el-table-column>
      <el-table-column
          prop="info"
          label="天气情况"
          width="120">
      </el-table-column>
      <el-table-column
          prop="temperature"
          label="温度"
          width="120">
      </el-table-column>
      <el-table-column
          prop="humidity"
          label="湿度"
          width="120">
      </el-table-column>
      <el-table-column
          prop="direct"
          label="风向"
          width="120">
      </el-table-column>
      <el-table-column
          prop="power"
          label="风力"
          width="120">
      </el-table-column>
      <el-table-column
          prop="api"
          label="空气质量"
          width="120">
      </el-table-column>
      <el-table-column
          label="图片"
          width="120">
        <template v-slot="r">
          <el-image
              style="width: 100px; height: 100px"
              :src="r.row.pic"
              ></el-image>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="200">
        <template slot-scope="scope">
          <el-button @click="handleClick(0)" type="text" size="small" icon="el-icon-search">添加</el-button>
          <el-button type="text" size="small"  @click="updateProps(scope.row)" icon="el-icon-search">修改</el-button>
          <el-button type="text" size="small"  @click="getdelete(scope.row.cargoId)">删除</el-button>
          <el-button type="text" size="small"  @click="getqs(scope.row)" icon="el-icon-search" style="size: 10px">签收</el-button>
          <el-button type="text" size="small"  @click="churuku(scope.row)" icon="el-icon-search" style="size: 10px">出入库按钮</el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-dialog title='添加仓库' :visible.sync="dialogFormVisible" >
      <el-form :model="form"  :rules="rules" ref="ruleForm">
        <el-form-item label="仓库名称" :label-width="formLabelWidth" prop="cargoName">
          <el-input v-model="form.cargoName" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="省/市/区" :label-width="formLabelWidth">
          <el-cascader   v-model="areaIds"  :options="options"    @change="getchange"  clearable></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" :label-width="formLabelWidth" prop="adress">
          <el-input v-model="form.adress" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="创建人" :label-width="formLabelWidth">
          <el-input v-model="form.people" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form.remark" autocomplete="off"  ></el-input>
        </el-form-item>

        <el-form-item label="农作物名称" :label-width="formLabelWidth">
          <el-select v-model="form.cronId" placeholder="请选择"  >
            <el-option v-for="item in getcrops" :key="item.cropId" :label="item.name" :value="item.cropId"></el-option>
          </el-select>
        </el-form-item>


        <el-upload
            class="avatar-uploader"
            action="http://localhost:8100/service/uploadFile"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
           >
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addtrue('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title='修改仓库' :visible.sync="dialogFormVisible1">
      <el-form :model="form1">
        <el-form-item label="仓库名称" :label-width="formLabelWidth">
          <el-input v-model="form1.cargoName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="省/市/区" :label-width="formLabelWidth">
          <el-cascader v-model="areaIds" :options="options"    @change="getchange1"   clearable></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" :label-width="formLabelWidth">
          <el-input v-model="form1.adress" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="创建人" :label-width="formLabelWidth">
          <el-input v-model="form1.people" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form1.remark" autocomplete="off"  ></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateCargo">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="收货地址" :visible.sync="dialogFormVisible2">
      <el-table :data="gridData">
        <el-table-column property="tid" label="运输编号" width="150"></el-table-column>
        <el-table-column property="cargoName" label="仓库名称"></el-table-column>
        <el-table-column property="pname" label="日期" width="150"></el-table-column>
        <el-table-column property="rname" label="农产品" width="200"></el-table-column>
        <el-table-column property="info" label="天气"></el-table-column>
        <el-table-column property="drivers" label="司机"></el-table-column>
        <el-table-column property="status" label="运输状态">
          <template v-slot="r">
            <el-tag type="success" v-if="r.row.status==1||r.row.status==2 ">
              {{r.row.status==1?'未运输':''}}
              {{r.row.status==2?'运输中':''}}
              {{r.row.status==3?'运输完成':''}}
            </el-tag>
            <el-tag type="danger" v-if="r.row.status==3">
              {{r.row.status==3?'运输完成':''}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column property="qstatus" label="是否签收">
          <template v-slot="r">
            <el-tag type="success"  v-if="r.row.qstatus==1||r.row.qstatus==2 ">
              {{r.row.qstatus==1?'代签收':''}}
              {{r.row.qstatus==2?'已签收':''}}
            </el-tag>
            <el-tag type="danger" v-if="r.row.qstatus==3">
              {{r.row.qstatus==3?'拒签':''}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="200">
          <template slot-scope="scope">
            <el-button type="text" size="small"  @click="qianshou(scope.row.tid)" icon="el-icon-search" style="size: 10px">签收</el-button>
            <el-button type="text" size="small"  @click="getjuqian(scope.row.tid)" icon="el-icon-search" style="size: 10px">拒签</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-dialog>
    <el-dialog title="出入库按钮" :visible.sync="dialogFormVisible3">
    <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
      <el-form-item prop="email" label="出入库名称">
        <el-input v-model="dynamicValidateForm.email"></el-input>
      </el-form-item>
      <el-form-item v-for="(prodcut) in dynamicValidateForm.productList"  :key="prodcut.key"  style="text-align: left">

        产品名称:<el-input v-model="prodcut.name" style="width: 300px;"></el-input>
        产品数量:<el-input v-model="prodcut.num" style="width: 300px;"></el-input>
        <el-button @click.prevent="removeDomain(prodcut)">删除</el-button>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
        <el-button @click="addDomain">新增域名</el-button>
        <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
      </el-form-item>
    </el-form>
    </el-dialog>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[3, 5, 10, 15]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "CargoView",
  data() {//属性
    return {
      dialogFormVisible3:false,
      dynamicValidateForm: {
        name: '',
        productList: [{
          num : '1000',
          name:""
        }]
      },
      gridData:[],
      form2:{},
      dialogFormVisible2:false,
      getcrops:[],
      imageUrl:"",
      form1:{},
      dialogFormVisible1:false,
      props:{
        value:'id',
        label:'name',
        children:'children'
      },
      areaIds:[0,0,0],
      options:[],
      menus1:[],
      menus:[],
      dialogFormVisible:false,
      formLabelWidth:'120px',
      form:{},
      tableData:[],
      total:0,
      pageNum:1,
      pageSize:3,
      rules: {
        cargoName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },

        ],
        adress: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
        ]
    }
    }
  }, methods: {//自定义方法
    qianshou(id)
    {
      console.log(id);
      this.axios.post("/service/logistics/qianshou?id="+id).then(res=>{
        if(res.data.code==200)
        {
          this.$message.success(res.data.msg);
          this.dialogFormVisible2=false
          this.getlist();
        }else
        {
          this.$message.error(res.data.msg);
        }
      })
    },
    getdp()
    {
      this.$router.push("/da")
    },
    submitForm() {

    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.productList.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.productList.splice(index, 1)
      }
    }, addDomain() {
      this.dynamicValidateForm.productList.push({
        num: '1000',
        name:"哈哈",
        key: Date.now()
      });
    },
    churuku()
    {
      this.dialogFormVisible3=true;
    },
    open1() {
      const h = this.$createElement;

      this.$notify({
        title: '你点毛线呢',
        message: h('i', { style: 'color: teal'}, '点了就是大傻逼')
      });
    },
    getjuqian(id)
    {
      console.log(id);
      this.axios.post("/service/logistics/getjq?id="+id).then(res=>{
        if(res.data.code==200)
        {
          this.$message.success(res.data.msg);
          this.dialogFormVisible2=false
          this.getlist();
        }else
        {
          this.$message.error(res.data.msg);
        }
      })

    },
    getqs(scope)
    {
      this.axios.post("/service/getqs?id="+scope.cargoId).then(res=>{
        this.gridData=res.data.data
      })

     this.dialogFormVisible2=true;

    },
    getdelete(id)
    {
      this.axios.post("/service/deleteById?id="+id).then(res=>{
        if(res.data.code==200)
        {
          this.$message.success(res.data.msg);
          this.getlist();
        }else
        {
          this.$message.error(res.data.msg);
        }
      })
    },
    excel()
    {
      window.location.href=this.axios.defaults.baseURL+"service/exportExecel";
    },
    getcrop()
    {
      this.axios.post("/service/getCargo").then(res=>{
        this.getcrops=res.data.data;
      })
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.form.pic=res;
      console.log(this.form.pic)
    },
    getchange1(id)
    {
      console.log(id)
      if(id.length>0)
      {
        this.form1.xid=id[0];
        this.form1.sid=id[1];
        this.form1.qid=id[2];
      }else
      {
        this.form1.provinceId='';
      }
    },
    updateCargo()
    {
      this.axios.post("/service/getupdate",this.form1).then(res=>{
        if(res.data.code==200)
        {
          this.$message.success(res.data.msg);
          this.dialogFormVisible1=false;
          this.getlist();
        }else
        {
          this.$message.error(res.data.msg);
        }
      })
    },
    updateProps(scope)
    {

      this.areaIds=[]
      this.form1=scope;
      if(scope.xid){
        this.areaIds.push(scope.xid,scope.sid,scope.qid);
      }
      console.log(this.areaIds)
      this.dialogFormVisible1=true;


    },
    addtrue(ruleForm)
    {



      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          this.axios.post("/service/getadd",this.form).then(res=>{
            if(res.data.code==200)
            {
              this.$message.success(res.data.msg);
              this.dialogFormVisible=false;

            }else
            {
              this.$message.error(res.data.msg);
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });


    },
    getchange(id)
    {
      console.log(id)
      if(id.length>0)
      {
         this.form.xid=id[0];
         this.form.sid=id[1];
         this.form.qid=id[2];
      }else
      {
        this.form.provinceId='';
      }
    },
    gettype()
    {
      this.axios.post("/service/gettype").then(res=>{
        this.options=res.data.data
      })
    },
    handleClick()
    {
          this.gettype();
          this.form={};
          this.form.cargoId=""
         this.dialogFormVisible=true;
    },
    handleSizeChange(val) {
     this.pageSize=val
      this.getlist();
    },
    handleCurrentChange(val) {
     this.pageNum=val
      this.getlist();
    },
    getlist()
    {
      this.axios.post("/service/cargo?pageNum="+this.pageNum+"&pageSize="+this.pageSize).then(res=>{
        this.tableData=res.data.data.list;
        this.total=res.data.data.total;
      })
    }
  }, created() { //钩子函数
    this.getlist();
    this.gettype();
    this.getcrop();
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>